<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">gg-geo-local</view>
      <view class="components-title-d">可在地图中选择地址</view>
    </view>
    <view class="components-info">
      <view class="components-info-title">地址信息</view>
      <view class="components-info-list" v-if="formData.address">
        <view class="components-info-list-title">
          v-model:
        </view>
        <view class="components-info-list-item">
          {{formData.address}}
        </view>
      </view>
      <view class="components-info-list-tip" v-else>
        <view><text>未输入</text></view>
        <view><text>点击输入框可输入您的地址信息</text></view>
      </view>
      <view class="components-info-list" v-if="location_data">
        <view class="components-info-list-title">
          @onLocation:
        </view>
        <view class="components-info-list-item">
          <!--  #ifdef  MP-WEIXIN -->
          <view v-for="(item,key) in location_data" :key="key">
            <text>&Prime;{{key}}&Prime;:</text>
            <text>{{' &Prime;'+item+'&Prime;'}}</text>
          </view>
          <!--  #endif -->
          <!--  #ifndef  MP-WEIXIN -->
          <text>{{location_data}}</text>
          <!--  #endif -->
        </view>
      </view>
      <view class="components-info-list-tip" v-else>
        <view><text>未选择</text></view>
        <view><text>点击输入框右侧搜索按钮选择地址</text></view>
      </view>
    </view>
    <!-- 主要代码在这里 -->
    <gg-nav-group label="输入框">
      <gg-geo-local label="详细地址" v-model="formData.address" @location="onLocation" />
    </gg-nav-group>
    <gg-nav-group label="有地图">
      <gg-geo-local label="详细地址" v-model="formData.address" @location="onLocation" isShowMap />
    </gg-nav-group>
    <gg-nav-group label="有地图和默认地理位置">
      <gg-geo-local label="详细地址" v-model="formData1.address" @location="onLocation" :location="location" isShowMap />
    </gg-nav-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
      },
      formData1: {
        address: '',

      },
      location: {

      },
      location_data: null,
    }
  },
  onLoad() {
    setTimeout(() => {
      this.formData1 = {
        address: '福建省福州市仓山区浦上大道198号',
      }
      this.location = {
        latitude: "26.040905",
        longitude: "119.279148"
      }
    }, 1000)
  },
  methods: {
    onLocation(e) {
      this.location_data = e
    }
  }
}
</script>

<style>
page {
  background: #f1f1f1;
}
.components-info {
  background-color: #ffffff;
  padding: 10px;
}
.components-info-title {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
}
.components-info-list,
.components-info-list-tip {
  margin: 20px 0;
}
.components-info-list-tip {
  text-align: center;
  font-size: 12px;
  color: #99999999;
}
.components-info-list-title {
  font-size: 12px;
  color: #999999;
}
.components-info-list-item {
  font-size: 12px;
  color: #666666;
  padding-left: 40px;
}
</style>
